<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="outdoor-app">
        <!-- 头部 -->
        <div class="head dpflex ">
            <p class="running"><span>户外跑</span>运动中</p>
            <p class="icon">
                <span class="music iconfont icon-music"></span>
                <span class="option iconfont icon-option"></span>
            </p>

        </div>
        <!-- 距离 -->
        <div class="distance">
            <p class="dpflex fdcolumn"><span class="num">99.99</span><span>公里</span></p>
        </div>
        <!-- GPS -->
        <div class="GPS dpflex">
            <p>GPS信号度低, 数据精准度低</p>
            <span class="line"></span>
            <span class="map iconfont icon-position"></span>
        </div>
        <!-- 运动数据 -->
        <div class="rundata dpflex">
            <p><span class="iconfont icon-speed"></span>配速<span class="data">--</span></p>
            <p><span class="iconfont icon-time"></span>用时<span class="data">00:00:20</span></p>
            <p><span class="iconfont icon-fire"></span>千卡<span class="data">3000</span></p>
        </div>
        <!-- 暂停 -->
        <div class="suspend dpflex">
            <!-- 暂停 -->
            <p class="stop"><span class="iconfont icon-stop"></span>暂停</p>
            <!-- 锁 -->
            <span class="lock iconfont icon-locking"></span>
        </div>
    </div>
</body>

</html>